<template>
  <div id="app">
      <div class="banner bg"></div>
      <img src="../src/assets/title1.jpg" alt="title" class="title">
      <div class="bgcss">
        <div class="content nopadd">
          <div class="box_outer brandmarg video">
            <a href="https://www.wstx.com/p-27018-1" target="_block">
              <div class="box border-r">
              <img src="../src/assets/bg1.jpg" alt="brand" class="img w-100">
              </div>
              <span class="tit mx">2018年年度各大品牌人气盘点之机械键盘篇</span>
            </a>
          </div>

          <div class="box_outer brandmarg video">
            <a href="https://www.wstx.com/p-27043-1" target="_block">
              <div class="box border-r">
              <img src="../src/assets/bg2.jpg" alt="brand" class="img w-100">
              </div>
              <span class="tit mx">2018年年度各大品牌人气盘点之游戏鼠标篇</span>
            </a>
          </div>

          <div class="box_outer brandmarg video">
            <a href="https://www.wstx.com/p-27070-1" target="_block">
              <div class="box border-r">
              <img src="../src/assets/bg3.jpg" alt="brand" class="img w-100">
              </div>
              <span class="tit mx">2018年年度各大品牌人气盘点之游戏耳机篇</span>
            </a>
          </div>

          <div class="box_outer brandmarg video">
            <a href="https://www.wstx.com/p-27075-1" target="_block">
              <div class="box border-r">
              <img src="../src/assets/bg4.jpg" alt="brand" class="img w-100">
              </div>
              <span class="tit mx">2018年年度各大品牌人气盘点之游戏鼠标垫篇</span>
            </a>
          </div>

          <div class="box_outer brandmarg video">
            <a href="https://www.wstx.com/p-27026-1" target="_block">
              <div class="box border-r">
              <img src="../src/assets/bg5.jpg" alt="brand" class="img w-100">
              </div>
              <span class="tit mx">2018年年度各大电竞路由器功能盘点</span>
            </a>
          </div>

          <div class="box_outer brandmarg video">
            <a href="https://www.bilibili.com/video/av40304037" target="_block">
              <div class="box border-r">
              <img src="../src/assets/bg6.jpg" alt="brand" class="img w-100">
              </div>
              <span class="tit mx">【2018视频盘点】哪款才是你心目中的最佳机械键盘？</span>
            </a>
          </div>

          <div class="box_outer brandmarg video">
            <a href="https://www.bilibili.com/video/av42068181" target="_block">
              <div class="box border-r">
              <img src="../src/assets/bg7.jpg" alt="brand" class="img w-100">
              </div>
              <span class="tit mx">【2018视频盘点】哪款才是你最爱的游戏鼠标？</span>
            </a>
          </div>  

          <div class="box_outer brandmarg video">
            <a href="https://www.bilibili.com/video/av41961445?from=search&seid=4816032211219214049" target="_block">
              <div class="box border-r">
              <img src="../src/assets/bg8.jpg" alt="brand" class="img w-100">
              </div>
              <span class="tit mx">【2018视频盘点】哪款才是你最中意的电竞路由器？</span>
            </a>
          </div>
        </div>
      </div>
      <div class="pos_r">
          <img src="../src/assets/title2.jpg" alt="title" class="title">
          <div class="btn">
            <span :class="{ active: brand }" @click="brand = true">大陆</span>
            <span :class="{ active: !brand }" @click="brand = false">海外</span>
          </div>
      </div>
      
      <div>
        <div class="content" v-if="brand">
            <div class="box_outer brandmarg" v-for="(item,index) in brand_data_in" :key="index">
              <div class="box">
              <img :src="require('../static/brand_in/' + (index + 1) + '.jpg')" alt="brand" class="img">
              </div>
              <span class="tit">{{item.name}}</span>
          </div>
          <a href="https://bbs.wstx.com/thread-808194-1-1.html" target="_block" class="toubtn"></a>
        </div>

        <div class="content" v-else>
            <div class="box_outer brandmarg" v-for="(item,index) in brand_data_out" :key="index">
              <div class="box">
              <img :src="require('../static/brand_out/' + (index + 1) + '.jpg')" alt="brand" class="img">
              </div>
              <span class="tit">{{item.name}}</span>
          </div>
          <a href="https://bbs.wstx.com/thread-808193-1-1.html" target="_block" class="toubtn"></a>
        </div>
      </div>
      <div class="pos_r">
          <img src="../src/assets/title3.jpg" alt="title" class="title">
          <div class="btn">
            <span :class="{ active: mouse }" @click="mouse = true">对称</span>
            <span :class="{ active: !mouse }" @click="mouse = false">人体工学</span>
          </div>
      </div>
      <div>
        <div class="content" v-if="mouse">
            <div class="box_outer brandmarg" v-for="(item,index) in mouse_sym" :key="index">
              <div class="box">
              <img :src="require('../static/mouse_sym/' + (index + 1) + '.jpg')" alt="mouse" class="img">
              </div>
              <span class="tit">{{item.name}}</span>
          </div>
          <a href="https://bbs.wstx.com/thread-808293-1-1.html" target="_block" class="toubtn"></a>
        </div>
        <div class="content" v-else>
            <div class="box_outer brandmarg" v-for="(item,index) in mouse_unsym" :key="index">
              <div class="box">
              <img :src="require('../static/mouse_unsym/' + (index + 1) + '.jpg')" alt="mouse" class="img">
              </div>
              <span class="tit">{{item.name}}</span>
          </div>
          <a href="https://bbs.wstx.com/thread-808295-1-1.html" target="_block" class="toubtn"></a>
        </div>
      </div>
      <div class="pos_r">
          <img src="../src/assets/title4.jpg" alt="title" class="title">
          <div class="btn">
            <span :class="{ active: keyboard }" @click="keyboard = true">全尺寸</span>
            <span :class="{ active: !keyboard }" @click="keyboard = false">非全尺寸</span>
          </div>
      </div>
      <div>
        <div class="content" v-if="keyboard">
            <div class="box_outer brandmarg" v-for="(item,index) in keyboard_all_data" :key="index">
              <div class="box">
              <img :src="require('../static/keyboard_all/' + (index + 1) + '.jpg')" alt="keyboard" class="img">
              </div>
              <span class="tit">{{item.name}}</span>
          </div>
          <a href="https://bbs.wstx.com/thread-808682-1-1.html" target="_block" class="toubtn"></a>
        </div>
        <div class="content" v-else>
            <div class="box_outer brandmarg" v-for="(item,index) in keyboard_unall_data" :key="index">
              <div class="box">
              <img :src="require('../static/keyboard_unall/' + (index + 1) + '.jpg')" alt="keyboard" class="img">
              </div>
              <span class="tit">{{item.name}}</span>
          </div>
          <a href="https://bbs.wstx.com/forum.php?mod=viewthread&tid=808684" target="_block" class="toubtn"></a>
        </div>
      </div>
      <img src="../src/assets/title5.jpg" alt="title" class="title">
      <div>
        <div class="content">
            <div class="box_outer brandmarg" v-for="(item,index) in ear_data" :key="index">
              <div class="box">
              <img :src="require('../static/ear/' + (index + 1) + '.jpg')" alt="ear" class="img">
              </div>
              <span class="tit">{{item.name}}</span>
          </div>
          <a href="https://bbs.wstx.com/thread-808703-1-1.html" target="_block" class="toubtn"></a>
        </div>
      </div>
      <img src="../src/assets/title6.jpg" alt="title" class="title">
      <div>
        <div class="content">
            <div class="box_outer brandmarg" v-for="(item,index) in pad_data" :key="index">
              <div class="box">
              <img :src="require('../static/pad/' + (index + 1) + '.jpg')" alt="pad" class="img">
              </div>
              <span class="tit">{{item.name}}</span>
          </div>
          <a href="https://bbs.wstx.com/thread-808712-1-1.html" target="_block" class="toubtn"></a>
        </div>
      </div>
      <img src="../src/assets/title7.jpg" alt="title" class="title">
      <div>
        <div class="content nopadd">
            <div class="box_outer brandmarg" v-for="(item,index) in edit_data" :key="index">
              <div class="box">
              <img :src="require('../static/edit/' + (index + 1) + '.jpg')" alt="edit" class="img">
              </div>
              <span class="tit">{{item.name}}</span>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { brand_data_out,brand_data_in,mouse_sym,mouse_unsym,ear_data,pad_data,edit_data,keyboard_unall_data,keyboard_all_data } from '../src/assets/data.js'

export default {
  name: 'App',
  data(){
    return {
      mouse:true,
      brand:true,
      keyboard:true,
      brand_data_out:[],
      brand_data_in:[],
      mouse_sym:[],
      mouse_unsym:[],
      ear_data:[],
      pad_data:[],
      edit_data:[],
      keyboard_unall_data:[],
      keyboard_all_data:[]
    }
  },
  mounted(){
    this.brand_data_out  = brand_data_out;
    this.brand_data_in = brand_data_in;
    this.mouse_sym = mouse_sym;
    this.mouse_unsym = mouse_unsym;
    this.ear_data = ear_data;
    this.pad_data = pad_data;
    this.edit_data = edit_data;
    this.keyboard_unall_data = keyboard_unall_data;
    this.keyboard_all_data = keyboard_all_data;
  }
}
</script>

<style>
body{
  background-color: #A31C19;
  background-image: url('../src/assets/bg.png');
  background-repeat: repeat;
}
#app {
  font-size: 16px;
  
}
.bg{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.banner{
  width: 100%;
  height: 750px;
  background-image: url('../src/assets/banner.jpg');
}
.title{
  width: 100%;
}

.content{
  margin: 20px auto;
  width: 1200px;
  background-color: #fff;
  padding: 10px;
  position: relative;
  padding-bottom: 90px;
}

.toubtn{
  width: 100%;
  display: block;
  cursor: pointer;
  background-image: url('../src/assets/toubtn.png');
  height: 80px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.pos_r{
  position: relative;
}
.btn{
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%,0);
  color: #F1DBAA;
  display: inline-block;
  line-height: 20px;
  z-index: 1;
}
.btn span{
  line-height: 20px;
  display: inline-block;
  padding: 0 20px;
  border-radius: 10px;
  border:solid 1px #F1DBAA;
  margin: 0 6px;
  transition: all .5s;
  cursor: pointer;
}
.btn .active{
  color: #C11B1D;
  background-color: #F1DBAA;
}
.btn span:hover{
  color: #C11B1D;
  background-color: #F1DBAA;
}
.box_outer{
  display: inline-block;
  text-align: center;
  vertical-align: top;
}
.box{
  overflow: hidden;
  position: relative;
  background-color: #FCECCA;
  transition: all .5s;
}
.box:hover{
  box-shadow: 0 0 1px 1px #C11B1D;
}
.tit{
  line-height: 14px;
  font-size: 12px;
  width: 175px;
  display: inline-block;
  margin: 10px auto 0;
  height: 30px;
}
.brandmarg{
  margin: 10px;
}
.img{
  display: block;
}
.nopadd{
  padding-bottom: 10px;
}
.video{
  width: 577px;
  height: 300px;
  margin-bottom: 50px;
  cursor: pointer;
}
.bgcss{
  background-image: url('../src/assets/bg_css.png');
  background-repeat: no-repeat;
  background-size: cover;
}
.mx{
  width: auto;
  color: #000;
  font-size: 16px;
}
.w-100{
  width: 100%;
}
.border-r{
  border: solid 1px #C11B1F;
}
</style>
